<template>
    <Page>
        <div
            class="banner-swiper"
            v-swiper:bannerSwiper="bannerSwiperOption">
            <div class="swiper-wrapper">
                <Linker
                    :to="banner.address"
                    ssr
                    tag="div"
                    class="swiper-slide"
                    v-for="(banner,index) in info.sy_bannerlbt"
                    :key="index"
                    :style="`background-image: url('${banner.image}');`">
                    <!--<img :src="banner">-->
                </Linker>
            </div>
            <div class="swiper-pagination swiper-pagination-bullets"/>
        </div>
        <div class="tool-bar">
            <div class="container">
                <div class="row no-spacing">
                    <div class="col-4 item">
                        <div class="icon"><i class="f-icon">&#xf2e3;</i></div>
                        <div class="label">入驻平台</div>
                    </div>
                    <div class="col-4 item">
                        <div class="icon"><i class="f-icon">&#xf2e4;</i></div>
                        <div class="label">一键分销上架</div>
                    </div>
                    <div class="col-4 item">
                        <div class="icon"><i class="f-icon">&#xf2e5;</i></div>
                        <div class="label">订单跟踪</div>
                    </div>
                    <div class="col-4 item">
                        <div class="icon"><i class="f-icon">&#xf2e6;</i></div>
                        <div class="label">支付货款</div>
                    </div>
                    <div class="col-4 item">
                        <div class="icon"><i class="f-icon">&#xf2e7;</i></div>
                        <div class="label">一件代发</div>
                    </div>
                    <div class="col-4 item">
                        <div class="icon"><i class="f-icon">&#xf2e8;</i></div>
                        <div class="label">售后服务</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row no-spacing">
                <div class="col-16">
                    <Panel
                        class="nbor-r"
                        label="品牌推荐">
                        <div class="row nma-t nma-b">
                            <Linker
                                :to="brand.address"
                                ssr
                                tag="div"
                                class="col-8"
                                v-for="(brand,index) in info.sy_pptj"
                                :key="index">
                                <div class="brand-item">
                                    <div
                                        class="inner"
                                        :style="`background-image: url('${brand.image}');`"/>
                                </div>
                            </Linker>
                        </div>
                    </Panel>
                </div>
                <div class="col-8">
                    <Panel
                        class="nbor-l"
                        label="电商动态">
                        <div
                            class="body bor-l"
                            slot="body">
                            <ul class="dynamic-list">
                                <Linker
                                    to="/"
                                    ssr
                                    tag="li"
                                    v-for="(data,index) in info.sy_dsdtid"
                                    :key="index">
                                    <a href="javascript:;">{{ data.title }}</a>
                                </Linker>
                            </ul>
                        </div>
                    </Panel>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row nma-t nma-b">
                <Linker
                    :to="cat.address"
                    ssr
                    tag="div"
                    class="col-4"
                    v-for="(cat,index) in info.sy_cpfl"
                    :key="index">
                    <div
                        class="classify-item"
                        :style="`background-image: url('${cat.image}');`">
                        <div class="label">{{ cat.text }}</div>
                    </div>
                </Linker>
            </div>
        </div>

        <div
            class="container"
            v-if="hotGoods.length">
            <Panel label="热门商品">
                <div class="hot-goods-swiper">
                    <div v-swiper:hotGoods="hotGoodsSwiperOption">
                        <div class="swiper-wrapper">
                            <GoodsItem
                                class="swiper-slide"
                                style="width: 244px;"
                                v-for="(banner,index) in hotGoods"
                                :data="{}"
                                :key="index"/>
                        </div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"/>
                    <div class="swiper-button-prev"/>
                </div>
                <div
                    class="footer ta-c"
                    slot="footer"><a href="javascript:;">查看更多</a></div>
            </Panel>
        </div>

        <div
            class="container"
            v-if="info.sy_cgalid.length">
            <Panel label="成功案例">
                <div class="row nma-t nma-b">
                    <Linker
                        to="/"
                        ssr
                        tag="div"
                        class="col-6"
                        v-for="(data,index) in info.sy_cgalid"
                        :key="index">
                        <div class="case-item">
                            <div class="inner">
                                <div class="img-obj">
                                    <div
                                        class="inner"
                                        :style="`background-image: url('${data.titleImage}');`"/>
                                </div>
                                <div class="content">
                                    <div class="label">{{ data.title }}</div>
                                    <div class="desc">{{ data.subtitle }}</div>
                                </div>
                            </div>
                        </div>
                    </Linker>
                </div>
                <div
                    class="footer ta-c"
                    slot="footer"><a href="javascript:;">查看更多</a></div>
            </Panel>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div
                        class="entering-wrap"
                        :style="`background-image: url('${info.sy_gysrz.image}');`">
                        <Linker
                            to="/special/supplier"
                            ssr
                            class="btn btn-big btn-main">入驻成为供应商</Linker>
                    </div>
                </div>
                <div class="col-12">
                    <div
                        class="entering-wrap"
                        :style="`background-image: url('${info.sy_fxsrz.image}');`">
                        <Linker
                            to="/special/distributor"
                            ssr
                            class="btn btn-big btn-main">入驻成为分销商</Linker>
                    </div>
                </div>
            </div>
        </div>

    </Page>
</template>

<script>
import PageMixin from '~/mixins/page.js';
import swiperImg from '~/assets/images/dev/index/swiper.png';
import Linker from '../components/linker/index';
export default {
    components: { Linker },
    mixins: [PageMixin],
    asyncData({ res = {} }) {
        console.log('isServer', process.server, process.client);
        if (process.server) {
            return { title: 'title', ...res.renderData };
        } else if (process.client) {
            // window.location.reload();
            console.log(res);
            return { title: 'title11', ...res.renderData };
        }
    },
    data() {
        return {
            hotGoods: [],
            bannerSwiperOption: {
                loop: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 30,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                },
            },
            hotGoodsSwiperOption: {
                loop: true,
                slidesPerView: 4,
                centeredSlides: true,
                spaceBetween: 30,
                autoplay: {
                    delay: 1112500,
                    disableOnInteraction: false,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            },
            info: {
                // 首页_网站名称
                sy_wzmc: '',
                // 首页_Banner轮播图
                sy_bannerlbt: '',
                // 首页_品牌推荐
                sy_pptj: '',
                // 首页_产品分类
                sy_cpfl: '',
                // 首页_供应商入驻背景图
                sy_gysrz: '',
                // 首页_分销商入驻背景图
                sy_fxsrz: '',
                // 首页_电商动态文章
                sy_dsdtid: '',
                // 首页_成功案例文章
                sy_cgalid: '',
            },
        };
    },
    head() {
        return {
            title: '搜货网 | 南安市网商网批平台',
        };
    },
    methods: {
        async getPortalInfoValue() {
            await this.$axios
                .get('/rpc/comm/pt/portalInfoConfig/getPortalInfoValue', {
                    keys: 'sy_wzmc,sy_bannerlbt,sy_pptj,sy_cpfl,sy_gysrz,sy_fxsrz,sy_dsdtid,sy_cgalid',
                })
                .then(json => {
                    const result = json.data.data;
                    this.info.sy_wzmc = result.sy_wzmc.text;
                    this.info.sy_bannerlbt = result.sy_bannerlbt.data;
                    this.info.sy_pptj = result.sy_pptj.data;
                    this.info.sy_cpfl = result.sy_cpfl.data;
                    this.info.sy_gysrz = result.sy_gysrz.data[0];
                    this.info.sy_fxsrz = result.sy_fxsrz.data[0];
                    this.findCmsArticleList(result.sy_dsdtid.text).then(reslut => {
                        this.info.sy_dsdtid = reslut;
                    });
                    this.findCmsArticleList(result.sy_cgalid.text).then(reslut => {
                        this.info.sy_cgalid = reslut;
                    });
                });
        },
        findCmsArticleList(id) {
            return this.$axios
                .get('/rpc/buyer/pt/cms/findCmsArticleList', {
                    id: id,
                })
                .then(json => Promise.resolve(json.data.data));
        },
    },
    mounted() {
        this.getPortalInfoValue();
    },
};
</script>

<style lang="scss" scoped>
@import '~/assets/style/_index.scss';
.banner-swiper {
    min-width: $page-min-width;
    .swiper-slide {
        height: 400px;
        background: transparent center no-repeat;
        background-size: cover;
    }
}
.hot-goods-swiper {
    width: 100%;
    padding: 0 50px;
    position: relative;
    .swiper-slide {
        /*height: 400px;*/
        background: transparent center no-repeat;
        background-size: cover;
    }
}

.tool-bar {
    background-color: #fff;
    padding: $padding 0;
    .item {
        text-align: center;
        cursor: pointer;
        > .icon {
            display: inline-block;
            background-color: $color-main;
            color: #fff;
            width: 76px;
            height: 76px;
            font-size: 40px;
            line-height: 76px;
            border-radius: 100%;
        }
        > .label {
            display: block;
            color: $gray6;
            margin-top: $margin-small;
        }
    }
}

.brand-item {
    border: 1px solid $color-border;
    > .inner {
        width: 100%;
        height: 0;
        padding-top: 170% / 240 * 100;
        background: transparent center no-repeat;
        background-size: cover;
    }
}

.classify-item {
    position: relative;
    width: 100%;
    padding-top: 100% / 180 * 100;
    background: transparent center no-repeat;
    background-size: cover;

    > .label {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        text-align: center;
        font-size: 20px;
    }
}

.dynamic-list {
    list-style-position: inside;
    /*padding-left: 1em;*/
    height: 177px;
    > li {
        padding: $padding-small 0;
    }
}

.entering-wrap {
    min-height: 350px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: transparent center no-repeat;
    background-size: cover;
}
</style>
